<template>
  <div class="wrapper">
    <el-watermark class="watermark" :content="config.content" :font="config.font" :rotate="config.rotate"
      :gap="config.gap" :offset="config.offset">
      <div class="demo">
        <h1 style="text-align: center;">请在右侧面板设置水印参数调整显示效果</h1>
        <!-- 添加PDF加载部分 -->
        <div class="pdf-container">
          <iframe :src="pdfUrl" width="100%" height="700px" frameborder="0"></iframe>
        </div>
      </div>
    </el-watermark>
    <el-form class="form" :model="config" label-position="top" label-width="50px">
      <el-form-item label="水印内容">
        <el-input v-model="config.content" />
      </el-form-item>
      <el-form-item label="水印颜色">
        <el-color-picker v-model="config.font.color" show-alpha />
      </el-form-item>
      <el-form-item label="字体大小">
        <el-slider v-model="config.font.fontSize" />
      </el-form-item>
      <el-form-item label="字体">
        <el-select v-model="config.font.fontFamily">
          <el-option label="Arial" value="Arial"></el-option>
          <el-option label="Times New Roman" value="Times New Roman"></el-option>
          <el-option label="Courier New" value="Courier New"></el-option>
          <el-option label="Sans-Serif" value="sans-serif"></el-option>
          <el-option label="宋体" value="宋体"></el-option>
          <el-option label="黑体" value="黑体"></el-option>
          <!-- 可以根据需要添加更多字体选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="字体样式">
        <el-select v-model="config.font.fontStyle">
          <el-option label="Normal" value="normal"></el-option>
          <el-option label="Italic" value="italic"></el-option>
          <el-option label="Oblique" value="oblique"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字重">
        <el-select v-model="config.font.fontWeight">
          <el-option label="Normal" value="normal"></el-option>
          <el-option label="100" value="100"></el-option>
          <el-option label="200" value="200"></el-option>
          <el-option label="300" value="300"></el-option>
          <el-option label="400" value="400"></el-option>
          <el-option label="500" value="500"></el-option>
          <el-option label="600" value="600"></el-option>
          <el-option label="700" value="700"></el-option>
          <el-option label="800" value="800"></el-option>
          <el-option label="900" value="900"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="旋转角度">
        <el-slider v-model="config.rotate" :min="-180" :max="180" />
      </el-form-item>
      <el-form-item label="水印间距">
        <el-space>
          <el-input-number v-model="config.gap[0]" controls-position="right" />
          <el-input-number v-model="config.gap[1]" controls-position="right" />
        </el-space>
      </el-form-item>
      <el-form-item label="左上角偏移量">
        <el-space>
          <el-input-number v-model="config.offset[0]" placeholder="offsetLeft" controls-position="right" />
          <el-input-number v-model="config.offset[1]" placeholder="offsetTop" controls-position="right" />
        </el-space>
      </el-form-item>
      <!-- 添加一个保存按钮 -->
      <el-button type="primary" @click="handleAddWatermark()">保存</el-button>
    </el-form>
  </div>
</template>

<script setup lang="js">
import { reactive, ref } from 'vue'
import { addWatermark } from '@/api/manage/watermark'

const { proxy } = getCurrentInstance();
const config = reactive({
  content: '智慧档案管理系统',
  font: {
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
    fontFamily: 'sans-serif',
    fontStyle: 'normal',
    fontWeight: 'normal',
  },
  rotate: -22,
  gap: [100, 100],
  offset: [50, 50],
})
const watermark = ref({});

// 定义PDF文件的URL
const pdfUrl = 'https://aclanthology.org/2024.acl-short.1.pdf'

const handleAddWatermark = () => {
  watermark.value.content = config.content;
  watermark.value.color = config.font.color;
  watermark.value.fontsize = config.font.fontSize;
  watermark.value.fontfamily = config.font.fontFamily;
  watermark.value.fontstyle = config.font.fontStyle;
  watermark.value.fontweight = config.font.fontWeight;
  watermark.value.rotate = config.rotate;
  watermark.value.zIndex = config.zIndex;
  watermark.value.gapX = config.gap[0];
  watermark.value.gapY = config.gap[1];
  watermark.value.offsetX = config.offset[0];
  watermark.value.offsetY = config.offset[1];
  addWatermark(watermark.value).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("保存成功");
      proxy.$router.push({ path: "/manage/watermark/list" });
    } else {
      proxy.$modal.msgError("保存成功");
    }
  })
}
</script>

<style scoped>
.wrapper {
  display: flex;
}

.watermark {
  display: flex;
  flex: auto;
}

.demo {
  flex: auto;
}

.form {
  width: 330px;
  margin-left: 20px;
  border-left: 1px solid #eee;
  padding-left: 20px;
}

img {
  z-index: 10;
  width: 100%;
  max-width: 300px;
  position: relative;
}

.pdf-container {
  margin-top: 20px;
  width: 100%;
}
</style>
